<template>
  <view class="container">
    <view class="video-container">
      <video
        class="video"
        :class="{ landscape: isLandscape }"
        :src="getImgFullPath(videoInfo?.videoUrl || '')"
        :autoplay="false"
        :loop="true"
        webkit-playsinline
        playsinline
        enable-play-gesture
        @play="handleVideoClick"
      ></video>
      <!-- 修改点：根据 videoBarFullDisplay 控制 image 的显示 -->
      <image
        v-if="imgShow"
        :src="isLandscape ? da : xiao"
        class="screenBtn"
        :class="{ landscapeBtn: isLandscape }"
        @click="toggleScreen"
      >
      </image>
    </view>
    <view v-if="!isLandscape" class="video-name">
      <view class="flex"
        ><span class="mr5">{{ videoInfo?.name }}</span>

        <!-- 下载按钮 -->
        <!-- <view @click="downloadVideo">
          <u-icon name="download" size="40" style="color: #2979ff"></u-icon>
        </view> -->
      </view>
      <view style="margin-top: 20rpx">简介:{{ videoInfo?.remark }}</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// API
import { baseApi } from '@/api'
// 工具
import { getImgFullPath } from '@/utils/index'
import {
  browserVersion,
  compareVersion,
  qs,
  getQueryVariable,
  launchClientApp,
  route,
  isWeChat
} from '@/utils/common'
//图片
import da from '@/static/hlhy/da.png'
import xiao from '@/static/hlhy/xiao.png'

const dataId = ref('')
const videoInfo = ref<any>({})
const isLandscape = ref(false)
const scaleFactor = ref(1) // 缩放比例，默认为1
const videoRef = ref<HTMLVideoElement | null>(null)
const isApp = ref()
const fullScreen = ref(false)
// 下载视频功能
const isDownloading = ref(false)
// 新增：用于存储 .uni-video-bar-full 的 display 状态
const videoBarFullDisplay = ref(false)

// #region ************************* 查看视频功能 *************************** */
// 查看视频功能
const lookVideo = async () => {
  // 获取完整的视频地址
  const videoUrl = videoInfo.value.videoUrl
  // 使用视频名称作为文件名，如果没有则使用默认名称
  const fileName = videoInfo.value.name
    ? `${videoInfo.value.name}.mp4`
    : `video_${Date.now()}.mp4`
  console.log(2)
  traditionalDownload(videoUrl, fileName)
}

// 查看视频
function traditionalDownload(url: string, fileName: string) {
  console.log('使用传统方式下载')

  // 创建一个隐藏的 a 标签用于下载
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  link.click()
}

// #endregion

// #region ************************* 下载视频功能 *************************** */
const downloadVideo = () => {
  console.log('使用 App 下载视频==>', isApp.value)

  if (isApp.value) {
    const u = browserVersion()
    if (u.iPhone) {
      // @ts-ignore
      window.JSBridge.invoke('downVideo', {
        videoUrl: videoInfo.value.videoUrl
      })
      return
    } else if (u.isAndroid) {
      // @ts-ignore
      if (window?.Android) {
        // @ts-ignore
        window?.Android?.downVideo(videoInfo.value.videoUrl)
      }
      return
    }
  }
}

// #endregion

// 获取视频信息
const getVideoInfo = async () => {
  const { data } = await baseApi.getAdvertisingInfo({
    id: dataId.value
  })
  console.log('视频列表', data)
  videoInfo.value = data
}

// 新增：检查 .uni-video-bar-full 的 display 状态
const checkVideoBarFullDisplay = () => {
  const videoBarFullElement = document.querySelector('.uni-video-bar-full')
  if (videoBarFullElement) {
    videoBarFullDisplay.value = videoBarFullElement.style.display !== 'none'
  }
}

// 在组件挂载后检查 .uni-video-bar-full 的 display 状态
onMounted(() => {
  nextTick(() => {
    checkVideoBarFullDisplay()
  })
})

const toggleScreen = () => {
  isLandscape.value = !isLandscape.value
  console.log(isLandscape.value, 55)
}

onLoad((option: any) => {
  isApp.value = option?.from || browserVersion().isHeiyin
  console.log('isApp==>', isApp.value)
  dataId.value = option.id
  getVideoInfo()
  console.log('视频加载完成')
})

// 处理全屏切换
// 进入全屏
const onEnterFullscreen = () => {
  console.log('进入全屏')
  isLandscape.value = true
}

// 退出全屏
const onExitFullscreen = () => {
  console.log('退出全屏')
  isLandscape.value = false
}

const imgShow = ref(true)
const handleVideoClick = () => {
  //     imgShow.value = !imgShow.value
  //  更新播放视频的方法
  lookVideo()
}

watch(
  () => imgShow.value,
  (newVal) => {
    console.log('imgShow.value', newVal)
    if (newVal) {
      setTimeout(() => {
        imgShow.value = !newVal
      }, 5000)
    }
  },
  { deep: true, immediate: true }
)

// 全屏
function fullscreenchangeFn(e: { detail: { fullScreen: boolean } }) {
  fullScreen.value = e.detail.fullScreen
}

// 获取视频宽高
function videoLoaded(e: any, item: any) {
  const { width, height } = e.detail
  if (width > height) {
    item.orientation = 0
  }
}

// 切换缩放比例
const toggleScale = () => {
  scaleFactor.value = scaleFactor.value === 1 ? 1.5 : 1
}
</script>

<style lang="scss" scoped>
//全屏按钮

.container {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
  transform-origin: center center;
}

.video-name {
  padding: 0 20rpx;
  font-size: 32rpx;
  box-sizing: border-box;
}

.video-container {
  padding: 20rpx 0;
  overflow: hidden;
  position: relative;

  .screenBtn {
    position: absolute;
    right: 10rpx;
    top: 50%;
    width: 50rpx;
    height: 50rpx;
  }
}

.video {
  width: 100%;
  height: calc(100vh - 200rpx);
}

// .video.landscape {
//     height: 99vh !important;
//     transform: scale(v-bind(scaleFactor));
// }

.landscape {
  height: 100vh !important;

  :deep(.uni-video-video) {
    transform: rotate(270deg);
    scale: 2;
  }

  :deep(.uni-video-bar-full) {
    transform: rotate(270deg);
    bottom: 50%;
    right: -650rpx;
    height: 100rpx;
  }

  :deep(.uni-video-bar) {
    left: 0 !important;
  }
}

.landscapeBtn {
  position: absolute;
  right: 40% !important;
  top: 50% !important;
  width: 80rpx;
  height: 80rpx;
}

:deep(.uni-video-fullscreen) {
  display: none;
}

// :deep()
</style>
